import { h,Component, createElement } from 'preact';
import classNames from 'classnames';
import propTypes from 'prop-types';

const Item = ({ className,dot,color,children }) => {
	const style = color?{ color,borderColor: color }:{};

	return (
		<li className={classNames('ant-timeline-item',className)}>
			<div className="ant-timeline-item-tail" />
			<div className={classNames('ant-timeline-item-head',{ 'ant-timeline-item-head-custom': !!dot })} style={style}>
				{dot}
			</div>
			<div className="ant-timeline-item-content">{children}</div>
		</li>
	);
};

Item.propTypes={
	color: propTypes.string,
	dot: propTypes.node
};

Item.defaultProps = {
	color: '#1875e7'
};

class Timeline extends Component {
	constructor(props) {
		super(props);
		this.state = {

		};
	}

	componentDidMount() {

	}

	render({ children,className,style,mode,...other },state) {
		return (
			<ul className={classNames('ant-timeline',className,{ [`ant-timeline-${mode}`]: !!mode })}>
				{children.map((child,i) => {
					const { className: itemClass,...childProps } = { ...child.props };
                    const modeClass = mode === 'alternate'?((i%2==0)?'right':'left'):mode;
					return createElement(
						Item,
						{
							className: classNames(itemClass,{'ant-timeline-item-last':i==children.length-1,[`ant-timeline-item-${modeClass}`]: !!modeClass }),
							...childProps
						}
					);
				})}
			</ul>
		);
	}
}

Timeline.Item = Item;

Timeline.propTypes = {
	mode: propTypes.oneOf(['left','right','alternate'])
};

export default Timeline;
